<template>
  <div>
    <div
      style="border: 2px solid skyblue;margin: 20px auto;width:20%;text-align:center;font-size:40px;background:skyblue"
    >成绩展示</div>
    <table
      style="width:60%;border-collapse:collapse;text-algin:center;margin: 50px auto;"
      border="1px"
    >
      <tr>
        <th>学科</th>
        <th>成绩</th>
        <th>是否通过</th>
      </tr>
      <tr v-for="(item,index) in gradeNum" :key="index">
        <th>{{Isgrade[index][0]}}</th>
        <th :class="{ 'low-score': item < 60 }">{{item}}</th>
        <th :class="{ 'low-score': item < 60 }">{{Isgrade[index][1]}}</th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "queryGrade",
  data() {
    return {
      gradeNum: [],
      Isgrade: []
    };
  },
  mounted() {
    this.gradeList();
  },
  methods: {
    async gradeList() {
      await this.$API.call("/getGradeList", "get").then(res => {
        this.gradeNum = res.data[0];
        this.Isgrade = Object.entries(res.data[1]);
      });
    }
  }
};
</script>>
  
<style lang='less' scoped>
.low-score {
  color: red; /* 将分数小于60的文字颜色设置为红色 */
}
</style>